<template>
    <div class="top_nav">
        <!-- 广告区域 -->

        <!-- top搜索框 -->
        <div class="top_input flex">
            <div class="top_search"></div>
            <div class="input_box">
                <van-icon name="search" />
                搜索商品，共123456件
            </div>
        </div>
        <!-- 分类搜索 -->
        <van-tabs v-model:active="active" scrollspy sticky>
            <van-tab v-for="item in topNavlist" :key="item.id" :title="item.name">
            </van-tab>
        </van-tabs>
       
        <!-- 轮播 图区域 -->
        <div class="top_swiper">
            <van-swipe class="my-swipe" lazy-render :autoplay="3000" indicator-color="white">

                <van-swipe-item v-for="item in focusList" :key="item.id">
                    <img :src="item.picUrl" @click="goDetail">
                </van-swipe-item>
            </van-swipe>
        </div>

            
        <theone></theone>




       
    </div>
</template>

<script setup lang="ts">
import homeApi from '@/api/home'
import { ref, onMounted, computed } from 'vue'
import router from '@/router'
import theone from '../home/components/theone/index.vue'
import { throttle } from 'lodash'
//初始化top列表数据
const homeData = ref<any>([])
//获取列表数据
const getListTest = async () => {
    try {
        let result = await homeApi.getHomeCateList()
        //赋值
        homeData.value = result.data
        // console.log('测试能拿数据不', result)
    } catch (error) {
        console.log(error)
    }
}
const topNavlist = ref([])
//首页列表数据
const getNavList = async () => {
    try {
        let result = await homeApi.getNavList()
      
        topNavlist.value = result.categoryL1List
    } catch (error) {
        console.log(error)
    }
}
//
//单击轮播图跳转到detail页面
const goDetail = () => {
    router.push({ path: '/detail' })
}
//滚动事件 返回到顶部
const backToTop = throttle(() => {
    window.addEventListener('scroll', backToTop)
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop > 0) {

    }
}, 200)

onMounted(() => {
    getNavList()
    getListTest()
    backToTop()
})
//策略描述列表
const policyDescList = computed(() => {
    return homeData.value.policyDescList
})
//定义轮播图数据
const focusList = computed(() => {
    return homeData.value.focusList
})

</script>

<style scoped lang="scss">
.flex {
    display: flex;
}

.top_input {
    width: 100%;
    height: 44px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
}

//top搜索提示--精灵图
.top_search {
    width: 69px;
    height: 20px;
    background-image: url(@/assets/yanxuan.png);
    vertical-align: middle;
    background-size: 4.3rem 4.3rem;
    background-position: 3rem 4.8rem;
    display: inline-block;
    margin-right: 0.2rem;

}

//分类搜索列表
.nav_list {
    width: 100%;
    height: 30px;
    background-color: #fff;
}

.nav_list {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    font-size: 12px;
    line-height: .6rem;
    text-align: center;

    span {
        margin: 0 10px;

    }
}

.input_box {
    width: 266px;
    height: 28px;
    background-color: #ededed;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    line-height: 28px;
}

//轮播图盒子位置
.top_swiper {
    width: 375px;
    height: 185px;

    img {
        width: 100%;
        height: 100%;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;

    text-align: center;
}

.content_three {
    width: 375px;
    height: 36px;
    margin-top: 5px;

    img {
        width: 16px;
        height: 16px;
        line-height: 36px;
    }

    ul {
        font-size: 12px;
        line-height: 36px;
        text-align: center;
        justify-content: space-around;
    }


}
</style>